<template>
	<view class="fixed-header">
		<!-- 搜索框 -->
		<u-search padding="0 10px" :show-action="true" action-text="搜索" :animation="true"></u-search>
		<!-- tabs 标签 -->
		<view class="tab-strickt">
			<u-tabs active-color="#0386c2" name="cate_name" count="cate_count" :list="tabList" :is-scroll="true"
				v-model="current" @change="change"></u-tabs>
		</view>
	</view>
	<!-- 瀑布流列表 -->
	<view class="wrap">
		<u-waterfall v-model="flowList" ref="uWaterfall">
			<template v-slot:left="{leftList}">
				<view class="demo-warter" v-for="(item, index) in leftList" :key="index">
					<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组
件，比如下方的lazy-load组件 -->
					<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
					<view class="demo-title">
						{{item.title}}
					</view>
					<view class="demo-price">
						{{item.price}}元
					</view>
					<view class="demo-tag">
						<view class="demo-tag-owner">
							自营
						</view>
						<view class="demo-tag-text">
							放心购
						</view>
					</view>
					<view class="demo-shop">
						{{item.shop}}
					</view>
				</view>
			</template>
			<template v-slot:right="{rightList}">
				<view class="demo-warter" v-for="(item, index) in rightList" :key="index">
					<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
					<view class="demo-title">
						{{item.title}}
					</view>
					<view class="demo-price">
						{{item.price}}元
					</view>
					<view class="demo-tag">
						<view class="demo-tag-owner">
							自营
						</view>
						<view class="demo-tag-text">
							放心购
						</view>
					</view>
					<view class="demo-shop">
						{{item.shop}}
					</view>
				</view>
			</template>
		</u-waterfall>
		<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="addRandomData"></u-loadmore>
	</view>
</template>
<script setup>
	import {
		ref
	} from 'vue'
	const current = ref(0)
	const tabList = ref([{
		cate_name: '全部'
	}, {
		cate_name: '电脑'
	}, {
		cate_name: '手机'
	}, {
		cate_name: '玩具'
	}, {
		cate_name: '鞋子'
	}, {
		cate_name: '图书'
	}, {
		cate_name: '电视'
	}, {
		cate_name: '衣服'
	}])
	//瀑布流数据
	const flowList = ref([{
			price: 75,
			title: '笔记本电脑',
			image: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.T1SMaKa_CO1kGBytmZKLvgHaHa?rs=1&pid=ImgDetMain',
		},
		{
			price: 385,
			title: '华为手机',
			image: 'https://cdn.acwing.com/media/article/image/2024/12/24/134627_7954eebec1-%E7%94%9F%E6%88%90%E5%8D%8E%E4%B8%BA%E6%89%8B%E6%9C%BA%E5%9B%BE%E7%89%87.png',
		},
		{
			price: 784,
			title: '台式电脑',
			image: 'https://ts1.cn.mm.bing.net/th?id=OIP-C.Cgj2NnmD5AdC9Eu94wrrJAHaFw&w=176&h=185&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
		},
		{
			price: 7891,
			title: '电脑',
			image: 'https://ts1.cn.mm.bing.net/th?id=OIP-C.xjBjgayWEdBmxnT8AkHgEQHaHB&w=177&h=185&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
		},
		{
			price: 2341,
			title: '自行车',
			image: 'https://ts1.cn.mm.bing.net/th?id=OIP-C.cQcc4Y5nReS5k7lXtTaRLAHaEK&w=181&h=185&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
		},
		{
			price: 2342,
			title: '考研英语',
			image: 'https://cn.bing.com/th?id=OPAC.d4xE5jMTRymQ9Q474C474&o=5&pid=21.1&w=160&h=160&qlt=100&dpr=1.3&c=8&pcl=f5f5f5',
		},
		{
			price: 2341,
			title: '苹果手机',
			image: 'https://ts1.cn.mm.bing.net/th?id=OIP-C.k0ipVLg9rgSxJb_XfwSrBgHaHa&w=176&h=185&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
		},
		{
			price: 2342,
			title: '小米电视',
			image: 'https://ts2.cn.mm.bing.net/th?id=OIP-C.cAI08oWuZ21pLMBRP3DknwHaMD&w=195&h=318&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
		}
	])
</script>
<style lang="scss" scoped>
	
	    .fixed-header {
	        position: sticky;
	        top: 0;
	        z-index: 100;
	        background-color: white;
	
	    }
	.wrap {
	    padding-top: 20rpx; // 确保内容不被遮挡
	}
	.tab-strickt {
		position: sticky;
		z-index: 99;
		top: 0;
		left: 0;
		background-color: #fff; // 确保背景色可见
	}

	.demo-warter {
		border-radius: 8px;
		margin: 5px;
		background-color: #ffffff;
		padding: 8px;
		position: relative;
	}

	.u-close {
		position: absolute;
		top: 32rpx;
		right: 32rpx;
	}

	.demo-image {
		width: 100%;
		border-radius: 4px;
	}

	.demo-title {
		font-size: 30rpx;
		margin-top: 5px;
		color: $u-main-color;
	}

	.demo-tag {
		display: flex;
		margin-top: 5px;
	}

	.demo-tag-owner {
		background-color: $u-type-error;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 4rpx 14rpx;
		border-radius: 50rpx;
		font-size: 20rpx;
		line-height: 1;
	}

	.demo-tag-text {
		border: 1px solid $u-type-primary;
		color: $u-type-primary;
		margin-left: 10px;
		border-radius: 50rpx;
		line-height: 1;
		padding: 4rpx 14rpx;
		display: flex;
		align-items: center;
		border-radius: 50rpx;
		font-size: 20rpx;
	}
.demo-price {
		font-size: 30rpx;
		color: $u-type-error;
		margin-top: 5px;
	}

	.demo-shop {
		font-size: 22rpx;
		color: $u-tips-color;
		margin-top: 5px;
	}
	scroll-view ::v-deep ::-webkit-scrollbar {
	width: 0;
	height: 0;
	color: transparent
	}

</style>